import React from 'react';
export function CategoryNavigation() {
  const categories = [{
    name: 'Kitchen Excellence',
    image: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80',
    path: '/kitchen'
  }, {
    name: 'Laundry Advanced',
    image: 'https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    path: '/laundry'
  }, {
    name: 'Climate Control',
    image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    path: '/climate'
  }, {
    name: 'Home Integrity',
    image: 'https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    path: '/security'
  }];
  return <section className="py-16 bg-[#e9ecef]">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold mb-2 text-center">
          Explore Our Categories
        </h2>
        <p className="text-center text-gray-600 mb-10 max-w-2xl mx-auto">
          Discover premium appliances across all areas of your home, expertly
          curated for performance and design.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {categories.map(category => <a key={category.name} href={category.path} className="group relative rounded-lg overflow-hidden h-64 shadow-md hover:shadow-xl transition-shadow">
              <div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{
            backgroundImage: `url("${category.image}")`
          }}></div>
              <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <h3 className="text-xl font-semibold text-white">
                  {category.name}
                </h3>
                <p className="text-white text-sm mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  Explore products →
                </p>
              </div>
            </a>)}
        </div>
      </div>
    </section>;
}